<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :footer="null"
      title="视频回放"
      width="1206px"
      wrapClassName="back-video-container"
      @cancel="closeModal()"
    >
      <div class="modal-body-container">
        <div id="video-play-back" ref="playerBack"></div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import EZUIKit from "ezuikit-js";
var player = null;
export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    dataSource: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.$nextTick(() => {
            this.init();
          });
        }
      },
      immediate: true,
    },
  },
  data() {
    return {};
  },
  methods: {
    init() {
      let divW = this.$refs.playerBack.clientWidth;
      let divH = this.$refs.playerBack.clientHeight;
      let { deviceSerialNumber, channelNumber, accessToken } = this.dataSource;
      player = new EZUIKit.EZUIKitPlayer({
        id: "video-play-back", // 视频容器ID
        accessToken,
        url: `ezopen://open.ys7.com/${deviceSerialNumber}/${channelNumber}.hd.rec`,
        template: "security", // security - 安防版(预览回放)
        width: divW,
        height: divH,
      });
      window.player = player;
    },
    //关闭弹框
    closeModal() {
      player && player.stop();
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.back-video-container {
  .ant-modal-body {
    padding: 0;
  }
  .modal-body-container {
    height: 640px;
    padding: 10px;
    #video-play-back {
      height: 100%;
      width: 100%;
      background-color: #000000;
    }
  }
}
</style>
